<template>
  <div class="country-code">
    <div class="codeBox" @click="getState">
      {{ code }}
      <image v-show="showArror" src="/static/images/icon/icon_arror_down_sc.png" />
    </div>
    <view class="mask" :class="{ active: showRegionListBox }" @click="close" @touchmove.prevent @touchmove.stop="()=>{}"></view>
    <view class="content" :class="{ active: showRegionListBox }">
      <view class="btn-line">
        <view class="btn" @click="close">取消</view>
        <view class="btn" :style="'color: #007FFF'" @click="selectRegion">完成</view>
      </view>
      <picker-view style="height: 500rpx;" :value="value" indicator-style="height: 88rpx;line-height: 88rpx;" @change="change">
        <picker-view-column>
          <view v-for="(item, index) in regionList" :key="index" class="picker-item">
            <view class="left">{{ item.region }}</view>
            <view class="right">{{ item.region_code }}</view>
          </view>
        </picker-view-column>
      </picker-view>
    </view>
    <div v-if="false" class="regionListBox fixedBox" :style="{'top': showRegionListBox ? '400rpx' : `${returnButtonTop}rpx`}">
      <div class="country-returnBox" @click="showRegionListBox = false">
        <image src="/static/images/icon/icon_arror_left.png" />
        选择你所在的地区
      </div>
      <div class="regionItemBox">
        <div v-for="(item, index) in regionList" :key="index" class="regionItem" @click="selectRegion(item)">
          <div class="left">{{ item.region }}</div>
          <div class="right">{{ item.region_code }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CountryCode',
  components: {
  },
  props: {
    showArror: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      title: '',
      code: '+86',
      value: [],
      showRegionListBox: false,
      regionList: [],
      returnButtonTop: 0
    }
  },
  computed: {
  },
  created() {
    // #ifdef MP-WEIXIN
    const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
    console.log('menuButtonInfo', menuButtonInfo)
    this.returnButtonTop = menuButtonInfo.top * 2 - 10
    // #endif
  },
  methods: {
    async _getData() {
      const res = await this.$api.loginApi.getMobileRegion({
        page_size: 100,
        page_no: 1,
        hideLoading: true
      })
      this.regionList = res.data
      // this.$vux.loading.hide()
    },
    selectRegion(item) {
      this.code = this.regionList[this.value[0]].region_code
      this.$emit('selected', this.code)
      this.showRegionListBox = false
    },
    change(e) {
      this.value = e.detail.value
    },
    close() {
      this.showRegionListBox = false
    },
    getState() {
      this._getData()
      this.showRegionListBox = true
      // this.$router.push({ path: '/selectState' + '?' + 'phone' })
    }
  }
}

</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .country-code{
    display: inline-block;
    vertical-align: top;
    color: #000;
    font-size: 28rpx;
    .codeBox{
      font-size: 38rpx;
      display: flex;
      align-items: center;
      image{
        width: 12rpx;
        height: 8rpx;
        margin-left: 10rpx;
      }
    }
    .mask{
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      position: fixed;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: -1;
      opacity: 0;
      transition: z-index opacity 0.2s linear;

      &.active{
        opacity: 1;
        z-index: 99;
      }
    }
    .content{
      background: #fff;
      left: 0;
      right: 0;
      bottom: 0;
      position: fixed;
      z-index: 999;
      transition: transform 0.2s linear;
      transform: translateY(120%);
      padding-bottom: constant(safe-area-inset-bottom);
      padding-bottom: env(safe-area-inset-bottom);
      .btn-line{
        @include flex;
        @include j-between;
        background-color: #f6f6f6;
        border-bottom: 1px solid #f2f2f2;
        box-shadow: 0 1px 2px #efefef;

        .btn{
          color: #777;
          font-size: 28rpx;
          // font-weight: bold;
          line-height: 80rpx;
          padding: 0 40rpx;

          &:active{
            opacity: 0.8;
          }
        }
      }
      .picker-item{
        @include text-ellipsis;
        height: 88rpx;
        line-height: 88rpx;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 50rpx;
      }

      &.active {
        transform: translateY(0);
      }
    }
  }
</style>
